<!--
  Copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://www.apache.org/licenses/LICENSE-2.0.html
-->
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Map Ads Unit</title> 
<style>
  html {
  height: 100%;
    font-family:'Helvetica', sans-serif;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 425px;
  /*position: absolute;*/
  /*bottom:0;*/
  /*left:0;*/
  /*right:0;*/
  /*top:0;*/
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=adsense"></script>
<script type="text/javascript"> 
  var map;
  var adUnit;
  var monterey = new google.maps.LatLng(36.5987, -121.8950);
 
  function initialize() {
 
    var mapOptions = {
      center: monterey,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
 
    var adUnitDiv = document.createElement('div');
    var adUnitOptions = {
      format: google.maps.adsense.AdFormat.HALF_BANNER,
      position: google.maps.ControlPosition.TOP,
      publisherId: 'ca-google-maps_apidocs',
      map: map,
      visible: true
    };
    adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
  }
 
  function changeFormat() {
    var format = document.getElementById('format').value;
    adUnit.setFormat(google.maps.adsense.AdFormat[format]);
  }
 
  function changePosition() {
    var position = document.getElementById('position').value;
    adUnit.setPosition(google.maps.ControlPosition[position]);
  }
 
</script> 
</head> 
<body onload="initialize()"> 
<div>
  Format:
    <select id="format" onchange="changeFormat();"> 
      <option value="LEADERBOARD">Leaderboard</option> 
      <option value="BANNER">Banner</option> 
      <option value="HALF_BANNER" selected>Half Banner</option> 
      <option value="SKYSCRAPER">Skyscraper</option> 
      <option value="WIDE_SKYSCRAPER">Wide Skyscraper</option> 
      <option value="VERTICAL_BANNER">Vertical Banner</option> 
      <option value="BUTTON">Button</option> 
      <option value="SMALL_SQUARE">Small Square</option> 
      <option value="SQUARE">Square</option> 
      <option value="SMALL_RECTANGLE">Small Rectangle</option> 
      <option value="MEDIUM_RECTANGLE">Medium Rectangle</option> 
      <option value="LARGE_RECTANGLE">Large Rectangle</option> 
    </select>

  Position:
    <select id="position" onchange="changePosition();"> 
      <option value="TOP_CENTER" selected>Top Center</option> 
      <option value="TOP_LEFT">Top Left</option> 
      <option value="TOP_RIGHT">Top Right</option> 
      <option value="RIGHT_TOP">Right Top</option> 
      <option value="LEFT_TOP">Left Top</option> 
      <option value="RIGHT_CENTER">Right Center</option> 
      <option value="LEFT_CENTER">Left Center</option>   
      <option value="BOTTOM_CENTER">Bottom</option> 
      <option value="BOTTOM_LEFT">Bottom Left</option> 
      <option value="BOTTOM_RIGHT">Bottm Right</option> 
      <option value="LEFT_BOTTOM">Left Bottom</option> 
      <option value="RIGHT_BOTTOM">Right Bottom</option> 
    </select>
</div> 
<div id="map_canvas"></div>
<div id="altContainer"></div> 
</body> 
</html> 